import React, { Component } from 'react'
import './index.css'

export default class Footer extends Component {
  checkAll = (e) => {
    console.log('e.target.checked',e.target.checked)
    this.props.checkAll(e.target.checked)
  }
  render() {
    const {todoArr} = this.props
    const doneLength = todoArr.reduce((sum,current) => {
      return current.done ? sum + 1 : sum
    },0)
    const allLength = todoArr.length
    return (
      <div className='footer common-border clearfix'>
        <div className="action-left fl">
            {/* 全选 */}
            <input 
              type="checkbox" 
              checked={doneLength === allLength && allLength !== 0}
              onChange={this.checkAll}
            />
            <label className='list-info'>
                <span>已完成
                  {doneLength}
                </span>
                <span>/</span>
                <span>全部{allLength}</span>
            </label>
        </div>
        <div className="action-right fr">
            <button onClick={this.props.clearDoneFun}>清除已完成</button>
        </div>
      </div>
    )
  }
}
